<template>
  <section class="not-found">
    <div class="not-found_box">
      <img class="img" :src="imgDict.error" alt="404"/>
      <h2 class="text">{{ config.root.notFound.title }}</h2>
      <div class="btns">
        <p class="button cursor" v-for="(item, key) in btns" :key="key" @click="toJump(item.type)">
          {{ item.text }}
          <b></b>
        </p>
      </div>
    </div>
  </section>
</template>

<script>
  import imgDict from '@/utils/img'

  export default {
    name: 'notFound',
    components: {},
    filters: '',
    mixins: [],
    data () {
      return {
        imgDict, // 图片
        btns: [
          // {
          //   type: 'REFRESH',
          //   text: this.config.root.notFound.refresh
          // },
          {
            type: 'GOBACK',
            text: this.config.root.notFound.upOneLevel
          },
          {
            type: 'HOME',
            text: this.config.root.notFound.home
          }
        ]
      }
    },
    mounted () {
    },
    methods: {
      // 跳转
      async toJump (type) {
        if (type === 'REFRESH') {
          const status = await this.$CONFIRM()
          if (status) this.$Tips('error')
        } else if (type === 'GOBACK') {
          this.$router.go(-1)
        } else if (type === 'HOME') {
          this.$router.push('/')
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .not-found {
    background-color: $white;
    display: flex;
    text-align: center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;

    .not-found_box {
      margin: 0 auto;
      padding: 0 15px;
      align-self: center;

      .img {
        width: 178px;
        height: 178px;
        margin: 0 auto;
      }

      .text {
        margin-top: 10px;
        margin-bottom: 30px;
      }

      .btns {
        overflow: hidden;
        line-height: 40px;
        height: 60px;
        padding: 10px 0;

        .button {
          width: 100px;
          font-size: 14px;
          margin: 0 10px;
          color: #757c85;
          position: relative;
          text-align: center;
          display: inline-block;
          transition: all 0.2s linear;

          &:hover {
            color: $white;

            b {
              height: 40px;
            }
          }

          b {
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: -1;
            width: 100px;
            height: 1px;
            background: #757c85;
            border-radius: 15px 0 15px 0;
            transition: all 0.2s linear;
          }
        }
      }
    }
  }
</style>
